<!--
 * @Descripttion: (炉子温度-实时曲线)
 * @Author: (admin)
 * @Date: (2025-01-21)
-->
<template>
    <div style="flex: 1;display: flex;flex-direction: column;overflow: hidden;">
      <!-- <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
        <el-form-item label="产品二维码" prop="fixtureId" >
            <el-input :input-style="{ width: '300px'}" v-model="queryParams.fixtureId" placeholder="请输入产品二维码" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
          <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
        </el-form-item>
      </el-form> -->
      <!-- 工具区域 -->
      <el-row :gutter="15" class="mb10">
        <el-col :span="1.5">
          <!-- <el-button type="primary" v-hasPermi="['cksfixtureinfo:add']" plain icon="plus" @click.stop="handleAdd">
            {{ $t('btn.add') }}
          </el-button> -->
        </el-col>
        
    </el-row>
  
    <div style="display: flex;flex: 1; flex-wrap: wrap;gap: 10px;overflow-y: auto;" >
        <!-- 温度曲线图 -->
        <div class="echarts" ref="chartsRef" />
    </div>
      
    </div>
  </template>
  
  <script setup >

  const { proxy } = getCurrentInstance()

  const SR  = proxy.signalr.SR

  const loading = ref(false)
 
  import * as echarts from 'echarts'
const chartsRef = ref(null)

const options = {
  title: {
    text: '炉温实时曲线',
    // 文字属性设置
    textStyle: {
      color: '#00e4ff'
    }
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: [5, 10]
  },
  yAxis: {
    // 设置坐标轴的 文字样式
    axisLabel: {
      color: '#bbdaff',
      margin: 20 // 刻度标签与轴线之间的距离。
    },
    // 坐标轴轴线相关设置。
    splitLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  xAxis: {
    splitLine: {
      show: false
    },
    // 坐标轴轴线相关设置。
    axisLine: {
      lineStyle: {
        color: 'orange'
      }
    },
    type: 'category',
    data: [],
    axisLabel: {
      // 设置坐标轴的 文字样式
      color: '#bbdaff',
      margin: 20 // 刻度标签与轴线之间的距离。
    },
    boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
    axisTick: {
      // 取消坐标轴刻度线
      show: false
    }
  },
  series: [
    {
      name: '-',
      itemStyle: {
        color: 'red',
        lineStyle: {
          color: '#FF005A',
          width: 2
        }
      },
      symbol: 'circle',
      markLine: {
        silent: true
      },
      type: 'line',
      data: [],
      animationDuration: 2000,
      animationEasing: 'cubicInOut',
      smooth: true, // 启用平滑曲线
      showSymbol: false // 不显示数据点
    }
  ]
}

let chart = null
const initChart = () => {
  const chart = echarts.init(chartsRef.value)
  chart.setOption(options)


  return chart
}
onMounted(() => {
  chart = initChart()
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })

  SR.invoke('op90Request',1)
  SR.off('op90Receive') 
SR.on("op90Receive", (data) => {
 //console.log('op90Receive',data)
              chart.setOption({ // 更新图表
                                xAxis: {
                                    data: data.times
                                },
                                series: [{
                                    data: data.degrees1
                                }]
                        });
          }
        )
})
  
  
 
// setInterval(function () {
//     var data = options.series[0].data; // 获取当前数据数组
//     var xAxisData = options.xAxis.data; // 获取当前x轴数据数组
//     xAxisData.push(new Date().toLocaleTimeString()); // 添加新的x轴数据点
//     data.push((Math.random() * 100).toFixed(2) - 0); // 添加新的数据点
//     if (xAxisData.length > 20) { // 假设我们只显示最近20个数据点
//         xAxisData.shift();
//         data.shift();
//     }
//     chart.setOption({ // 更新图表
//         xAxis: {
//             data: xAxisData
//         },
//         series: [{
//             data: data
//         }]
//     });
// }, 2000); // 每2秒更新一次数据




  
  
  
  

  
 
  </script>

<style lang="scss" scoped>

:deep(.flex-item){
    width: 49%;
    flex-shrink: 0;
   // height: 180px;
   // background-color: bisque;
    //padding: 10px;
}
.echarts {
  height: 100%;
  width: 100%;
}
</style>